<template>
	<div>
		<mj-title type="h2" title="Timeline 时间线"></mj-title>
		<div class="page-desc">可视化地呈现时间流信息。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-timeline>
					<mj-timeline-item title="第一阶段">巩固清零攻坚“十大行动”成果阶段。从现在开始至5月21日，重点是降新增、防反弹，持续减少封控区、管控区人数，防范区有序放开、有限流动、有效管控，全市保持低水平社会活动。</mj-timeline-item>
					<mj-timeline-item title="第二阶段">向常态化防控转换阶段。5月22日至5月31日，单日新增感染者数进一步减少，不断缩小封控区和管控区范围直至解封，加快疫情防控向常态化分级分类管理转变。</mj-timeline-item>
					<mj-timeline-item title="第三阶段">全面恢复全市正常生产生活秩序阶段。6月1日至6月中下旬，在严格防范疫情反弹、风险可控的前提下，全面实施疫情防控常态化管理，全面恢复全市正常生产生活秩序。</mj-timeline-item>
				</mj-timeline>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;mj-timeline>
  &lt;mj-timeline-item title="第一阶段">巩固清零攻坚“十大行动”成果阶段。从现在开始至5月21日，重点是降新增、防反弹，持续减少封控区、管控区人数，防范区有序放开、有限流动、有效管控，全市保持低水平社会活动。&lt;/mj-timeline-item>
  &lt;mj-timeline-item title="第二阶段">向常态化防控转换阶段。5月22日至5月31日，单日新增感染者数进一步减少，不断缩小封控区和管控区范围直至解封，加快疫情防控向常态化分级分类管理转变。&lt;/mj-timeline-item>
  &lt;mj-timeline-item title="第三阶段">全面恢复全市正常生产生活秩序阶段。6月1日至6月中下旬，在严格防范疫情反弹、风险可控的前提下，全面实施疫情防控常态化管理，全面恢复全市正常生产生活秩序。&lt;/mj-timeline-item>
&lt;/mj-timeline>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="其他使用方式"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-timeline>
					<mj-timeline-item title="step1" color="#f80">自定义节点颜色</mj-timeline-item>
					<mj-timeline-item title="step2">
						<Icon type="repair" slot="node" />
						自定义节点icon
					</mj-timeline-item>
					<mj-timeline-item>去标题，简单模式</mj-timeline-item>
					<mj-timeline-item title="3月28日">
						<mj-card radius="5" shadow="hover">
							<mj-list :data='data' border="false" size="small"></mj-list>
						</mj-card>
					</mj-timeline-item>
				</mj-timeline>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;mj-timeline>
    &lt;mj-timeline-item title="step1" color="#f80">自定义节点颜色&lt;/mj-timeline-item>
    &lt;mj-timeline-item title="step2">
    &lt;Icon type="repair" slot="node" />
    自定义节点icon
    &lt;/mj-timeline-item>
    &lt;mj-timeline-item>去标题，简单模式&lt;/mj-timeline-item>
    &lt;mj-timeline-item title="3月28日">
      &lt;mj-card radius="5" shadow="hover">
        &lt;mj-list :data='data' border="false" size="small">&lt;/mj-list>
      &lt;/mj-card>
    &lt;/mj-timeline-item>
  &lt;/mj-timeline>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Timeline Item 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>标题</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>color</td>
					<td>圆圈颜色</td>
					<td>String</td>
					<td>primary 色值</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Timeline Slot"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>node</td>
					<td>自定义节点icon</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
    data () {
        return {
			data:[
				{title:"为天地立心"},
				{title:"为生民立命"},
				{title:"为往圣继绝学"},
				{title:"为万世开太平"},
			]
        }
    },
}
</script>